<%--
  Created by IntelliJ IDEA.
  User: 喝假酒的ywj
  Date: 2020/4/16
  Time: 15:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css"/>
<link rel="stylesheet" href="${pageContext.request.contextPath}/layui-v2.5.6/layui/css/layui.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/iconfont/iconfont.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/nprogress.css">
<html>
<head>
    <title>we job</title>
    <script>
        function showImg1(obj) {
            let file=$(obj)[0].files[0];    //获取文件信息
            let imgdata='';
            if(file)
            {
                let reader=new FileReader();  //调用FileReader
                reader.readAsDataURL(file); //将文件读取为 DataURL(base64)
                reader.onload=function(evt){   //读取操作完成时触发。
                    $("#preImg").attr('src',evt.target.result)  //将img标签的src绑定为DataURL
                };
            }
            else{
                alert("上传失败");
            }
        }
        function showImg(obj) {
            let file=$(obj)[0].files[0];    //获取文件信息
            let imgdata='';
            if(file)
            {
                let reader=new FileReader();  //调用FileReader
                reader.readAsDataURL(file); //将文件读取为 DataURL(base64)
                reader.onload=function(evt){   //读取操作完成时触发。
                    $("#preImg1").attr('src',evt.target.result)  //将img标签的src绑定为DataURL
                };
            }
            else{
                alert("上传失败");
            }
        }
    </script>
</head>
<body>
<button class="layui-btn layui-btn-primary" id="search"  data-toggle="modal" data-target="#myLargeModalLabel">添加banner</button>
<table class="layui-table">
    <colgroup>
        <col width="50">
        <col width="150">
        <col width="150">
        <col width="150">
    </colgroup>
    <thead>
    <tr>
        <th>序号</th>
        <th>图片</th>
        <th>修改</th>
        <th>显示</th>
    </tr>
    </thead>
    <tbody id="userList">
    <c:forEach items="${banner.list}" var="item" varStatus="id">
        <tr>
            <td>${id.count}</td>
            <td><img src="${item.url}" style="width: 100px;height: 100px"></td>
            <td><button class="layui-btn layui-btn-normal" onclick="updateCity('${item.is_show}','${item.url}',${item.movie_id},${item.id})">修改</button></td>
            <td>
                <c:if test="${item.is_show==0}">
                    <button class="layui-btn layui-btn-normal" onclick="changeStatus(${item.id},${item.is_show},this)" data-staff="${item.is_show}">显示</button>
                </c:if>
                <c:if test="${item.is_show==1}">
                    <button class="layui-btn layui-btn-danger" onclick="changeStatus(${item.id},${item.is_show},this)" data-staff="${item.is_show}">隐藏</button>
                </c:if>
            </td>
        </tr>
    </c:forEach>
    </tbody>
</table>
<nav style="text-align: center">
    <ul class="detail-pager" id="pagination" ></ul>
</nav>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" id="myLargeModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <form class="layui-form" action="">
            <div class="modal-content" style="padding: 20px">
                <div class="layui-form-item" style="margin-top: 30px">
                    <label class="layui-form-label form-label">图&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;片</label>
                    <div class="layui-input-block">
                        <div class="div_imgall">
                            <input class="input_flie" type="file" onchange="showImg1(this)" required lay-verify="required" id="avatar2">
                            <div>
                                <img src="http://127.0.0.1:8088/touxiang.png" class="pre-pic" id="preImg"/>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item" style="margin-top: 30px">
                    <label class="layui-form-label">指向的岗位</label>
                    <div class="layui-input-block">
                        <select name="id" lay-verify="required">
                            <option value=""></option>
                            <c:forEach items="${movies}" var="item">
                                <option value="${item.id}">${item.id}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item" style="margin-top: 30px">
                    <label class="layui-form-label">是否展示</label>
                    <div class="layui-input-block">
                        <select name="is_show" lay-verify="required">
                            <option value=""></option>
                            <option value="1">是</option>
                            <option value="0">否</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" id="myLargeModalLabe2">
    <div class="modal-dialog modal-lg" role="document">
        <form class="layui-form" action="">
            <div class="modal-content" style="padding: 20px">
                <input name="ids" id="ids" type="hidden">
                <div class="layui-form-item" style="margin-top: 30px">
                    <label class="layui-form-label form-label">图&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;片</label>
                    <div class="layui-input-block">
                        <div class="div_imgall">
                            <input class="input_flie" type="file" onchange="showImg(this)"  id="avatar1">
                            <div>
                                <img src="" class="pre-pic" id="preImg1"/>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item" style="margin-top: 30px">
                    <label class="layui-form-label">指向的岗位</label>
                    <div class="layui-input-block">
                        <select name="id" lay-verify="required" id="id">
                            <option value=""></option>
                            <c:forEach items="${movies}" var="item">
                                <option value="${item.id}">${item.id}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item" style="margin-top: 30px">
                    <label class="layui-form-label">是否展示</label>
                    <div class="layui-input-block">
                        <select name="is_show" lay-verify="required" id="is_show">
                            <option value=""></option>
                            <option value="1">是</option>
                            <option value="0">否</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formDemo1">立即提交</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<script src="${pageContext.request.contextPath}/js/jquery-3.4.1.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/layui-v2.5.6/layui/layui.js"></script>
<script src="${pageContext.request.contextPath}/js/nprogress.js"></script>
<script src="${pageContext.request.contextPath}/js/dayjs.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap-paginator.js"></script>
<script src="${pageContext.request.contextPath}/js/template-web.js"></script>
<style>
    .div_imgall {
        width: 100px;
        height: 100px;
        position: relative;
    }
    .input_flie {
        display: block;
        width: 100%;
        height: 100%;
        opacity: 0;
        z-index: 100;
        position: absolute;
        left: 0;
        top: 0;
    }
    .pre-pic{
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        height: 100px;
    }
</style>
<script>
    $(function () {
        layui.use(['form', 'layer'], function () {
            var form = layui.form;
            form.on('submit(formDemo)', function (data) {
                console.log(data.field)
                NProgress.start();
                var formData = new FormData();
                formData.append('avatar', $('#avatar2')[0].files[0]);
                formData.append('id', data.field.id);
                formData.append('is_show', data.field.is_show);
                console.log(formData)
                $.ajax({
                    url:'${pageContext.request.contextPath}/backend/user/addBanner',
                    dataType: "json",
                    async:true,
                    contentType: false,
                    processData: false,
                    type:'POST',
                    data:formData,
                    success:function (data) {
                        if(data.status===1) {
                            NProgress.done();
                            window.location.reload();
                        }
                    }
                });
                return false;
            });
            form.on('submit(formDemo1)', function (data) {
                console.log(data.field)
                var formData = new FormData();
                formData.append('avatar', $('#avatar1')[0].files[0]);
                formData.append('id', data.field.id);
                formData.append('is_show', data.field.is_show);
                formData.append("ids",data.field.ids);
                NProgress.start();
                $.ajax({
                    url:'${pageContext.request.contextPath}/backend/user/addBanner',
                    dataType: "json",
                    async:true,
                    contentType: false,
                    processData: false,
                    type:'POST',
                    data:formData,
                    success:function (data) {
                        if(data.status===1) {
                            layer.msg("修改成功",function () {
                                NProgress.done();
                                window.location.reload();
                            });
                        }
                    }
                });
                return false;
            });
        });
        if((${banner.total})==0){
            $('#pagination').hide();
            $('#userList').html('<div style="margin-left: 30px;margin-top: 30px">暂无数据</div>');
        }else{
            $('#pagination').bootstrapPaginator({
                //主版本号
                bootstrapMajorVersion: 3,
                //当前页
                currentPage: ${banner.pageNum},
                //总页数
                totalPages: ${banner.pages},
                //请求url
                pageUrl: function (type, page, current) {
                    return '${pageContext.request.contextPath}/backend/user/banner?pageNum='+page;
                },
                //显示分页条信息
                itemTexts: function (type, page, current) {
                    switch (type) {
                        case "first":
                            return "首页";
                        case "prev":
                            return "上一页";
                        case "next":
                            return "下一页";
                        case "last":
                            return "尾页";
                        case "page":
                            return page;
                    }
                },
            });
        }
    });
    function updateCity(is_show,url,job_id,id) {
        $('#myLargeModalLabe2').modal('show');
        $('#preImg1').attr('src',url);
        var select = 'dd[lay-value=' +job_id+ ']';
        $('#id').siblings("div.layui-form-select").find('dl').find(select).click();
        var select1 = 'dd[lay-value=' +is_show+ ']';
        $('#is_show').siblings("div.layui-form-select").find('dl').find(select1).click();
        $('#ids').val(id);
    }
    function changeStatus(id,status,is) {
        let st = $(is).data('staff');
        console.log(id,st);
        $.ajax({
            url:'${pageContext.request.contextPath}/backend/user/changeRole1',
            dataType: "json",
            type:'POST',
            data:{id:id,status:1-parseInt(st)},
            success:function (data) {
                console.log(data);
                if(parseInt(st)==0){
                    $(is).text('隐藏');
                    $(is).removeClass('layui-btn-normal')
                    $(is).addClass('layui-btn-danger')
                    $(is).data('staff','1');
                }else {
                    $(is).text('显示');

                    $(is).removeClass('layui-btn-danger')
                    $(is).addClass('layui-btn-normal')
                    $(is).data('staff','0');
                }
            }
        })
    }
</script>
</body>
</html>
